refactor: single source of truth for file supported size/type#60
Conversation
There was a problem hiding this comment.
Pull request overview
This PR refactors file upload validation by establishing a single source of truth for supported file types and size limits in src/db/uploads.ts, removing duplicate validation logic from the frontend and improving consistency across the codebase.
Key changes:
- Removed client-side file type and size validation from
static/character.js - Increased maximum upload size from 5MB to 10MB and added HEIF image format support in
src/db/uploads.ts - Updated
UploadAvatarForm.tsxto dynamically calculate max file size from backend constants - Improved error messages in
src/services/uploads.tsto be more user-friendly
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
static/character.js |
Removed duplicate frontend validation for file type and size |
src/services/uploads.ts |
Updated error messages to be more user-friendly and consistent |
src/db/uploads.ts |
Increased max upload size to 10MB and added HEIF format support |
src/components/UploadAvatarForm.tsx |
Refactored to use backend constants for max size and converted from arrow function to named function |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
src/components/UploadAvatarForm.tsx
Outdated
| accept="image/jpeg,image/png,image/webp,image/gif" | ||
| /> | ||
| <div class="form-text">Supported formats: JPEG, PNG, WebP, GIF</div> |
There was a problem hiding this comment.
The accept attribute on the file input doesn't include image/heif, which was added to ALLOWED_IMAGE_TYPES in src/db/uploads.ts. This means users won't be able to select HEIF files from the file picker even though the backend now accepts them. Add image/heif to the accept attribute.
| accept="image/jpeg,image/png,image/webp,image/gif" | |
| /> | |
| <div class="form-text">Supported formats: JPEG, PNG, WebP, GIF</div> | |
| accept="image/jpeg,image/png,image/webp,image/gif,image/heif" | |
| /> | |
| <div class="form-text">Supported formats: JPEG, PNG, WebP, GIF, HEIF</div> |
src/components/UploadAvatarForm.tsx
Outdated
| id="avatarFileInput" | ||
| accept="image/jpeg,image/png,image/webp,image/gif" | ||
| /> | ||
| <div class="form-text">Supported formats: JPEG, PNG, WebP, GIF</div> |
There was a problem hiding this comment.
The supported formats documentation doesn't mention HEIF, which was added to ALLOWED_IMAGE_TYPES in src/db/uploads.ts. Update this to include HEIF so users know it's supported.
| <div class="form-text">Supported formats: JPEG, PNG, WebP, GIF</div> | |
| <div class="form-text">Supported formats: JPEG, PNG, WebP, GIF, HEIF</div> |
src/services/uploads.ts
Outdated
| if (!isValidSize(sizeBytes)) { | ||
| throw new Error( | ||
| `Invalid file size: ${sizeBytes} bytes. Maximum allowed: ${uploads.MAX_UPLOAD_SIZE} bytes` | ||
| `File size (${sizeBytes / (1024 * 1024)}MB) too big; max allowed: ${uploads.MAX_UPLOAD_SIZE / (1024 * 1024)} MB` |
There was a problem hiding this comment.
Inconsistent spacing before "MB" in the error message. The first occurrence has no space (${sizeBytes / (1024 * 1024)}MB) while the second has a space (${uploads.MAX_UPLOAD_SIZE / (1024 * 1024)} MB). For consistency, either use a space in both places or omit it in both.
| `File size (${sizeBytes / (1024 * 1024)}MB) too big; max allowed: ${uploads.MAX_UPLOAD_SIZE / (1024 * 1024)} MB` | |
| `File size (${sizeBytes / (1024 * 1024)} MB) too big; max allowed: ${uploads.MAX_UPLOAD_SIZE / (1024 * 1024)} MB` |
vs separate checks on FE and BE
igor47
force-pushed
the
igor/file-upload-validation
branch
from
8bbf6a7 to
284b16f
Compare
vs separate checks on FE and BE